<template>
    <div class="w1200 hospital_page">

        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
            <el-breadcrumb  class="el_breadcrumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
                <!-- <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}</el-breadcrumb-item> -->
                <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}医院</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑 end -->

        <!-- 筛选区域 开始 -->
        <div class="filter_box">
            <div class="cell_box">
                <div class="name">医院类型：</div>
                <div class="list_box">
                    <!-- <nuxt-link :to="`/hospital?classId=${item.id}&projectId=${projectId}&servicesId=${servicesId}&pageNumber=${pageNumber}`" replace class="cell" :class="classId == item.id ? 'cell_active' : ''" v-for="(item, index) in typeList" :key="`type_${index}`">{{ item.name }}</nuxt-link> -->
                    <!-- <div class="cell" :class="classId == '' ? 'cell_active' : ''" @click="searchHospital('', 'classId')">全部
                    </div> -->
                    <div class="cell" :class="classId == item.id ? 'cell_active' : ''" v-for="(item, index) in typeList" :key="`type_${index}`" @click="searchHospital(item.id, 'classId')">{{ item.name }}</div>
                </div>
            </div>
            <div class="cell_box">
                <div class="name">擅长项目：</div>
                <div class="list_box">
                    <!-- <div class="cell" :class="projectId == '' ? 'cell_active' : ''" @click="searchHospital('', 'projectId')">
                        全部</div> -->
                    <div class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in projectList" :key="`type_${index}`" @click="searchHospital(item.id, 'projectId')">{{ item.name }}
                    </div>
                    <!-- <nuxt-link :to="`/hospital?projectId=${item.id}&classId=${classId}&servicesId=${servicesId}&pageNumber=${pageNumber}`" replace class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in projectList" :key="`project_${index}`">{{ item.name }}</nuxt-link> -->
                </div>
            </div>
            <div class="cell_box">
                <div class="name">特色服务：</div>
                <div class="list_box">
                    <!-- <div class="cell" :class="servicesId == '' ? 'cell_active' : ''" @click="searchHospital('', 'servicesId')">全部</div> -->
                    <div class="cell" :class="servicesId == item.id ? 'cell_active' : ''" v-for="(item, index) in serviceList" :key="`type_${index}`" @click="searchHospital(item.id, 'servicesId')">{{ item.name }}</div>
                    <!-- <nuxt-link :to="`/hospital?servicesId=${item.id}&classId=${classId}&projectId=${projectId}&pageNumber=${pageNumber}`" replace class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in serviceList" :key="`service_${index}`">{{ item.name }}</nuxt-link> -->
                </div>
            </div>
        </div>
        <!-- 筛选区域 end -->

        <!-- 申请 开始 -->
        <!-- <div class="apply_box">
            <div class="desc">
                <span class="name">简单三步</span>
                <span>挑选适合你的医院</span>
            </div>
            <div class="apply_form">
                <el-select v-model="form.bbb" class="a_select" placeholder="您所在的城市">
                    <el-option label="1111" value="1"></el-option>
                    <el-option label="2222" value="2"></el-option>
                    <el-option label="3333" value="3"></el-option>
                </el-select>
                <el-select v-model="form.aaa" class="a_select" placeholder="您的口腔问题">
                    <el-option label="1111" value="1"></el-option>
                    <el-option label="2222" value="2"></el-option>
                    <el-option label="3333" value="3"></el-option>
                </el-select>
                <el-input v-model="form.phone" class="a_input" placeholder="填写您的手机号" />
                <el-button type="primary" class="btn">搜索</el-button>
            </div>
        </div> -->
        <Settlement />
        <!-- 申请 end -->

        <!-- 内容 开始 -->
        <div class="content">
            <!-- 左侧医院列表 开始 -->
            <div class="left_box">

                <!-- 列表 开始 -->
                <div class="hospital_list">
                    <ListHospital v-for="(item, index) in hospitalList" :key="`hospital_${index}`" :info="item" />
                </div>
                <!-- 列表 end -->

                <!-- 分页 开始 -->
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :current-page="pageNumber" :page-size="10" :total="total" @current-change="changePage">
                    </el-pagination>
                </div>
                <!-- 分页 end -->

            </div>
            <!-- 左侧医院列表 end -->

            <!-- 右侧内容 开始 -->
            <div class="right_box">

                <!-- 社区问题 开始 -->
                <div class="problem_box">
                    <div class="head">社区问题</div>
                    <div class="list_box">
                        <ListQuestion v-for="(item, index) in questionList" :key="`problem_${index}`" :info="item" :index="index" />
                    </div>
                </div>
                <!-- 社区问题 end -->

                <!-- 机构入驻标准 开始 -->
                <SettleIn class="mt20" />
                <!-- 机构入驻标准 end -->


            </div>
            <!-- 右侧内容 end -->
        </div>
        <!-- 内容 end -->



    </div>
</template>
<script>
import { PLATFORM_TYPE,GET_HOSPITAL_CLASS_OPTIONS, GET_HOSPITAL_PROJECT_OPTIONS, GET_HOSPITAL_SERVICES_OPTIONS, GET_HOSPITAL_SEARCH, GET_QUESTIONANSWER_SEARCH, GET_SEO_SETTING_INFO } from '@/http/interface'
import ListHospital from '@/components/hospital/list.vue'
import qs from 'qs';
import Settlement from '@/components/apply/index.vue'
import ListQuestion from '@/components/question/listCell.vue'
import SettleIn from '@/components/apply/settlein.vue'
export default {
    components: {
        ListHospital,
        Settlement,
        ListQuestion,
        SettleIn
    },
    data() {
        return {
            typeList: [],
            projectList: [],
            serviceList: [],
            classId: '',
            projectId: '',
            servicesId: '',
            form: {},
            hospitalList: [],
            total: 0,
            pageNumber: 1,
            questionList: [],
            seoInfo: {}
        }
    },
    head() {
        return {
            title: this.seoInfo.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.seoInfo.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.seoInfo.keywords,
                },
                {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:'https://m.lilikq.com/hospital'
                }
            ],
            link:[
        {ref:'canonical',href:`${this.$domain}/hospital`}
      ]
        };
    },
    watchQuery: true,
    async asyncData({ query, $axios,$cookies }) {
        console.log(query.pageNumber)
        if(query.city){
            $cookies.set('city',query.city)
           
        }
        if(query.code){
            $cookies.set('cityCode',query.code)
        }
        let pageNumber = Number(query.pageNumber || 1);
        let tes = await $axios.get(GET_HOSPITAL_CLASS_OPTIONS)
        let typeList = [{name:'全部',id:''}].concat(tes.data || [])

        // 擅长项目
        let pro = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
        let projectList = [{name:'全部',id:''}].concat(pro.data || [])

        // 特色服务
        let ses = await $axios.get(GET_HOSPITAL_SERVICES_OPTIONS);
        let serviceList = [{name:'全部',id:''}].concat(ses.data || [])

        // 医院列表
        let params = { pageSize: 10 }
        params.pageNumber = pageNumber
        params.classId = query.classId
        params.projectId = query.projectId
        params.servicesId = query.servicesId
        if($cookies.get('city') && $cookies.get('city') != '全国'){
            params.city = $cookies.get('city')
        }
        let hes = await $axios.get(GET_HOSPITAL_SEARCH, { params: params })
        let obj = hes.data || {}
        let hospitalList = obj.list || []

        // 社区问答
        let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: { pageNumber: 1, pageSize: 10 } })
        let qbj = qes.data || {}
        let questionList = qbj.list || []

        // 获取seo配置
        let seo = await $axios.get(GET_SEO_SETTING_INFO, { params: { type: 1, platform: PLATFORM_TYPE } })
        let seoInfo = seo.data || {}
        console.log(pageNumber)
        return {
            typeList,
            projectList,
            serviceList,
            hospitalList,
            total: obj.totalElements,
            pageNumber,
            classId: query.classId || '',
            projectId: query.projectId || '',
            servicesId: query.servicesId || '',
            questionList,
            seoInfo
        }
    },
    methods: {
        // 切换分页
        changePage(e) {
            console.log(e)
            this.pageNumber = e;
            this.navigateToPage()
        },

        // 切换筛选条件
        searchHospital(e, id) {
            this[id] = e
            this.pageNumber = 1;
            this.navigateToPage()
        },

        // 切换路由
        navigateToPage() {
            //let query = this.$route.query
            let o = { }
            o.pageNumber = this.pageNumber
            if (this.classId) {
                o.classId = this.classId
            }
            if (this.projectId) {
                o.projectId = this.projectId
            }
            if (this.servicesId) {
                o.servicesId = this.servicesId
            }

            // if (this.classId || this.projectId || this.servicesId) {
            //     o.pageNumber = 1
            // }
            o.random = Math.random()
            let _path = `/hospital?${qs.stringify(o)}`
            console.log(_path)
            this.$router.replace({
                path: _path
            })
            //this.$routerReplace(o)
        },

        getPath(){
            let o = { pageNumber: this.pageNumber }
            if (this.classId) {
                o.classId = this.classId
            }
            if (this.projectId) {
                o.projectId = this.projectId
            }
            if (this.servicesId) {
                o.servicesId = this.servicesId
            }
            let _path = `/hospital?${qs.stringify(o)}`
            return _path
        }

    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/index/hospital.less';
</style>